<template>
  <div class="d-flex">
    <div class="mr-5">
      <div class="accounting-progress" :class="`border-${statusStyle}`">
        <div class="status-label" :class="`text-${statusStyle}`">
          {{ enumCollectStatus[editRow.pay_status] || '-' }}
        </div>
        <small class="text-muted">保费收取状态</small>
      </div>
    </div>
    <table class="table table-sm table-borderless accounting-table">
      <tbody>
        <tr>
          <td>单号：</td>
          <td colspan="3">{{ editRow.order_no }}</td>
        </tr>
        <tr>
          <td width="15%">项目名称：</td>
          <td width="35%">{{ editRow.customer_name || '-' }}</td>
          <td width="15%">贷款金额：</td>
          <td width="35%">{{ editRow.reply_funds || '-' }}万元</td>
        </tr>
        <tr>
          <td>项目负责人：</td>
          <td>{{ editRow.corp_name || '-' }}</td>
          <td>联系电话：</td>
          <td>{{ editRow.mobile_no || '-' }}</td>
        </tr>
        <tr>
          <td>起保时间：</td>
          <td>{{ $utils.dateFormat(editRow.load_date, 'yyyy年MM月dd日') || '-' }}</td>
          <td>结束时间：</td>
          <td>{{ $utils.dateFormat(editRow.load_end_date, 'yyyy年MM月dd日') || '-' }}</td>
        </tr>
        <tr>
          <td>项目地址：</td>
          <td>{{ editRow.address || '-' }}</td>
          <td>放款银行：</td>
          <td>{{ editRow.bank_name || '-' }}</td>
        </tr>
        <tr>
          <td>担保费率：</td>
          <td>
            <span>{{ editRow.gua_rate || '-' }}%</span>
          </td>
          <td>应缴时间：</td>
          <td>{{ $utils.dateFormat(editRow.due_warrant_date, 'yyyy年MM月dd日') || '-' }}</td>
        </tr>
        <tr>
          <td>在保余额：</td>
          <td>{{ editRow.left_funds }} 万元</td>
          <td>缴费金额：</td>
          <td>{{ editRow.actual_warrant_fee || '-' }}元</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { enumCollectStatus, enumCollectStatusStyle } from '@/bigcredit/views/settle/collect/model'

export default {
  components: {},
  props: {
    editRow: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      enumCollectStatus,
    }
  },
  computed: {
    statusStyle() {
      return enumCollectStatusStyle[this.editRow.pay_tatus] || ''
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {},
}
</script>
<style lang="scss" scoped>
.accounting-progress {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid;
  padding-top: 15px;
  text-align: center;
  clip-path: polygon(0% 90%, 0% 0%, 100% 0%, 100% 90%);
}
.status-label {
  font-weight: bold;
  line-height: 1;
  padding: 0 0.5rem;
  min-height: 28px;
}
.label-text {
  display: inline-block;
  min-width: 90px;
  color: gray;
}
.accounting-table {
  width: auto;
  flex: 1;
  > tbody tr td:nth-of-type(2n + 1) {
    color: gray;
  }
}
</style>
